import $ from 'jquery'
import * as joint from 'jointjs'
import Element from './element'
import * as cc from '../util/constants'

/**
 * 数据清理节点
 */
const JointTransformer = joint.shapes.basic.Transformer = joint.shapes.basic.Generic.extend({
    markup: '<g class="rotatable">' +
        `<rect class="background" width="${cc.ELEMENT_WIDTH}" height="${cc.ELEMENT_HEIGHT}" fill="none"/>` +
        '<path class="shadow" d="M49.2,9.8l-2.1,5.7l0,0.1l1.2,0.3l1.9-5.2c0.3-0.9-0.1-1.9-1-2.1l0,0C49.3,9,49.3,9.4,49.2,9.8z"/>' +
        '<path class="shadow" d="M52.6,19.4c0-0.4-0.2-0.8-0.5-1.2c-0.2-0.3-0.5-0.4-0.7-0.6c0.1,0.2,0.2,0.5,0.2,0.7l0.4,5 c0,0.5-0.1,0.9-0.4,1.2c-0.2,0.2-0.5,0.3-0.7,0.3l-0.3,0L50.4,25l0.1-0.1c-0.2,0-0.3,0-0.5,0c-2,1-5,2-6,2c-2,0-2-1-4-2s-3.8,0-6,0 c-0.6,0-1.6-0.5-2.6-1.1c-0.3,0.4-0.6,0.6-0.9,0.8c-1.3,0.6-2.1,1.4-2.4,2.5c-0.2,0.9,0,2,0.7,2.7l0.5,0.2c0.1,0.3,0.3,0.6,0.5,0.8 l0.6,0.2l1.9,0.6c0.4,0.1,0.8,0,1.1-0.3c0,0,0,0,0,0l-0.3-0.1l1.5,0.5L34,31.5l0,0c-0.1,0.3-0.1,0.6,0.1,0.7c0,0,0.1,0,0.1,0 l1.5,0.5c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.2-0.2,0.4-0.3l0.5,0.2l0,0c-0.1,0.3-0.1,0.6,0.1,0.7c0,0,0.1,0,0.1,0l2.2,0.7 c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.2-0.2,0.4-0.3L40,33.3l0.8,0.2l0,0c-0.1,0.3-0.1,0.6,0.1,0.7c0,0,0.1,0,0.1,0l1.9,0.6 c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.2-0.2,0.4-0.3l-0.3-0.1l2.2,0.7l-1.4-0.4l0,0c-0.1,0.3-0.1,0.6,0.1,0.7c0,0,0.1,0,0.1,0l2.2,0.7 l0.1,0c0.4,0,0.8-0.1,1.2-0.4c0.9-0.5,1.4-1.3,1.7-2.3c0.1-0.5,0.3-1.1,0.4-1.8c0.1-0.3,0.1-0.6,0.3-1.2c0.6-2.1,0.7-2.9,0.9-3.9 l0.1-0.4l0.1-0.1l0.3,0c0.3,0,0.5-0.1,0.7-0.3c0.3-0.3,0.5-0.7,0.4-1.2L52.6,19.4z"/>' +
        '<path class="stroke" d="M33.5,29.2l0.6-0.7l-1.1,2c-0.1,0.3-0.1,0.6,0.1,0.7c0,0,0.1,0,0.1,0l1.5,0.5c0.2,0,0.3,0,0.5-0.1 c0.6-0.6,1.1-1,1.4-1.4l0.6-0.7l-1.1,2c-0.1,0.3-0.1,0.6,0.1,0.7c0,0,0.1,0,0.1,0l2.2,0.7c0.2,0,0.3,0,0.5-0.1 c0.6-0.6,1.1-1,1.4-1.4l0.6-0.7l-1.1,2c-0.1,0.3-0.1,0.6,0.1,0.7c0,0,0.1,0,0.1,0l1.9,0.6c0.2,0,0.3,0,0.5-0.1 c0.6-0.6,1.1-1,1.4-1.4l0.6-0.7l-1.1,2c-0.1,0.3-0.1,0.6,0.1,0.7c0,0,0.1,0,0.1,0l2.2,0.7l0.1,0c0.4,0,0.8-0.1,1.2-0.4 c0.9-0.5,1.4-1.3,1.7-2.3c0.1-0.5,0.3-1.1,0.4-1.8c0.1-0.3,0.1-0.6,0.3-1.2c0.5-2.1,0.7-2.9,0.9-3.9l0.1-0.4l0.1-0.1l0.3,0 c0.3,0,0.5-0.1,0.7-0.3c0.3-0.3,0.5-0.7,0.4-1.2l-0.4-5c0-0.4-0.2-0.8-0.5-1.2c-0.3-0.3-0.6-0.6-1-0.7l-2.9-0.9l0-0.1l2.1-5.7 c0.3-0.9-0.1-1.9-1-2.1l-2.1-0.6c-0.9-0.3-1.8,0.3-2.2,1.2L41.9,14L41.8,14l-3.1-0.9c-0.4-0.1-0.8-0.1-1.2,0 c-0.5,0.1-0.9,0.4-1.2,0.7l-3.6,3.8c-0.4,0.4-0.5,0.8-0.5,1.2c0.1,0.4,0.3,0.7,0.8,0.9l0.3,0.1l0,0.1l-0.1,0.4 c-0.8,2.3-1.9,4-2.8,4.4c-1.3,0.6-2.1,1.4-2.4,2.5c-0.2,0.9,0,2,0.7,2.7l0.6,0.2l1.9,0.6c0.4,0.1,0.8,0,1.1-0.3 C32.9,29.9,33.2,29.5,33.5,29.2L33.5,29.2z M49.7,17.7c0.4,0.1,0.7,0.6,0.8,0.9l0.4,4.6c0,0.2-0.1,0.3-0.3,0.4c0,0-0.1,0-0.1,0 l-16.6-5c-0.1,0-0.2-0.2-0.2-0.4c0,0,0-0.1,0.1-0.1l3.3-3.5c0.3-0.3,0.9-0.4,1.2-0.3l3.7,1.1c0.3,0.1,0.6-0.1,0.8-0.4l2.3-6.3 c0.1-0.3,0.5-0.5,0.8-0.4l2,0.6c0.3,0.1,0.4,0.4,0.3,0.8l-2.3,6.3c-0.1,0.3,0,0.7,0.3,0.8L49.7,17.7z M34.9,26.4 c-1.1,1.3-2,2.3-2.8,3l-0.2,0.1l-0.1,0l-2.3-0.7l-0.1-0.1c-0.3-0.4-0.4-0.9-0.3-1.4c0.2-0.6,0.7-1.1,1.6-1.5 c0.9-0.4,1.8-1.4,2.6-2.9c0.4-0.7,0.7-1.5,1-2.2l0.2-0.4l0.1-0.1l14.7,4.4l0.1,0.1l-0.1,0.4c-0.2,0.9-1.6,6.7-1.7,7.1 c-0.1,0.6-0.4,1-0.9,1.3c-0.2,0.1-0.4,0.2-0.6,0.2l-0.1,0l-1.6-0.5l0.4-0.6c0.3-0.4,0.8-1.3,1.5-2.5c0.2-0.3,0.1-0.7-0.2-0.8l-0.1,0 c-0.2-0.1-0.5,0-0.7,0.2c-1.1,1.3-2,2.3-2.8,2.9l-0.2,0.1l-0.1,0l-1.4-0.4l0.4-0.6c0.1-0.2,0.2-0.4,0.3-0.6c0.2-0.4,0.6-1,1.1-1.9 c0.2-0.3,0.1-0.7-0.2-0.8l-0.1,0c-0.2-0.1-0.5-0.1-0.7,0.2c-1.1,1.3-2,2.3-2.8,2.9l-0.2,0.1l-0.1,0l-1.4-0.4l0.4-0.6 c0.1-0.2,0.2-0.4,0.3-0.6c0.2-0.4,0.6-1,1.1-2c0.2-0.3,0.1-0.7-0.2-0.8c0,0,0,0,0,0l-0.1,0c-0.2-0.1-0.5,0-0.7,0.2 c-1.1,1.3-2,2.3-2.8,3L35,30.4l-0.1,0l-0.8-0.3l0.4-0.6c0.1-0.2,0.2-0.4,0.3-0.6c0.2-0.4,0.6-1,1.1-2c0.2-0.3,0.1-0.7-0.2-0.8 l-0.1,0C35.4,26.1,35.1,26.2,34.9,26.4L34.9,26.4z"/>' +
        '</g>',
    defaults: joint.util.deepSupplement({
        type: 'basic.Transformer',
        attrs: {
            size: {
                width: cc.ELEMENT_WIDTH,
                height: cc.ELEMENT_HEIGHT,
            },
            ".stroke": {
            },
            ".shadow": {
                'opacity': 0.3
            }
        }
    }, joint.shapes.basic.Generic.prototype.defaults)
})

class Transformer extends Element {
    constructor(...args) {
        super(...args)
        this._jointInstance = new JointTransformer(this.jointAttrs)
    }

    mixinAttr() {
        let mixin = {
            attrs: {
                '.stroke': {
                    fill: 'none'
                },
                '.shadow': {
                    fill: 'none'
                },
            }
        }
        $.extend(this.jointAttrs, mixin)
    }

    setColor(colorIndex) {
        super.setColor(colorIndex)
        let color = this.getColorFromIndex(colorIndex)
        this.jointInstance.attr('.stroke/fill', color)
        this.jointInstance.attr('.shadow/fill', color)
    }

}

export default Transformer